<template>
	<view class="content">
		<Tabs></Tabs>
		<view class="deviceList">
			<view class="title">
				<view class="name">
					<text class="">设备</text>
					<view class="dot"></view>
					<text class="num">10</text>
				</view>
				<!-- <text class="iconfont icon-sousuo sousuo"></text> -->
				<image src="../../static/images/sousuo.png" mode=""></image>
			</view>
			<scroll-view scroll-y="true" class="list-index">
				<view class="list">
					<view :class="['item',activeIndex==index?'active':'']" v-for="(item,index) in list" @click="handleItem(item,index)">
						<view class="name">
							{{item.deviceName}}
						</view>
						<view class="cont">
							<view class="code">
								{{item.code}}
							</view>
							<view class="compName">
								{{item.comp}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="play">
			<view class="video" v-if="currentItem && currentItem.url">
				<view class="title">
					<view class="deviceName">
						{{currentItem.code}}
					</view>
					<view class="address">
						{{currentItem.address}}
					</view>
				</view>
				<videoView width="100px" height="100px"></videoView>
				<!-- <video object-fit='cover' src="rtmp://ns8.indexforce.com/home/mystream" show-fullscreen-btn='true'></video> -->
				<view class="people">
					{{currentItem.name}}  {{currentItem.phone}}
				</view>
			</view>
			<view class="nodata" v-else>
				<text class="iconfont icon-tishi"></text>
				<view class="">
					请选择设备
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Tabs from '../../components/tabs.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				// url:''
				activeIndex:-1,
				currentItem:{},
				list:[
					{
						id:1,
						url:'rtmp://ns8.indexforce.com/home/mystream',
						deviceName:'监控探头1-1',
						comp:'阿里巴巴',
						code:'SXT-000001',
						address:'办公室301',
						name:'张三',
						phone:'18600000000'
					},
					{
						id:2,
						url:'rtmp://ns8.indexforce.com/home/mystream',
						deviceName:'监控探头1-2',
						comp:'腾讯',
						code:'SXT-000000',
						address:'办公室302',
						name:'李赛',
						phone:'18600000001'
					},
					{
						id:3,
						url:'rtmp://ns8.indexforce.com/home/mystream',
						deviceName:'监控探头1-3',
						comp:'烽火',
						code:'SXT-000002',
						address:'办公室305',
						name:'王五',
						phone:'18600000008'
					}
				]
			}
		},
		components:{
			Tabs
		},
		onLoad() {
			
		},
		methods: {
			handleItem(item,index){
				console.log(item,"当前对象")
				this.activeIndex = index;
				this.currentItem = item;
				console.log(this.currentItem)
				// let uniVideoView = uni.requireNativePlugin('EZUI-VideoView_videoView')
				// uniVideoView.createPlayer('F50800405', 1, (res) => {
				// 	alert(res)
				// 	uniVideoView.startRealPlay()
				// })
				// uniVideoView.startRealPlay()
			}
		}
	}
</script>

<style lang="less" scoped>
	.content{
		display: flex;
		overflow: hidden;
		.deviceList{
			display: flex;
			flex-direction: column;
			width: 30%;
			padding: 0 10px;
			box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #F3F3F3;
				height: 60px;
				// padding: 10px 0;
				.name{
					display: flex;
					align-items: center;
					font-size: 24px;
					color: #235FA7;
				}
				.dot{
					// display: inline-block;
					width: 4px;
					height: 4px;
					border-radius: 50%;
					background-color: #929292;
					margin: 0 10px;
				}
				.num{
					font-size: 16px;
					color: #929292;
				}
				.sousuo{
					color: #235FA7;
					font-size: 18px;
					font-weight: bold;
				}
				image{
					width: 20px;
					height: 20px;
				}
			}
			.list-index{
				height: calc(100vh - 60px);
			}
			.list{
				display: flex;
				flex-direction: column;
				.item{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					border-bottom: 1px solid #F3F3F3;
					padding: 10px 0;
					.name{
						font-size: 18px;
						color: #235FA7;
					}
					.cont{
						display: flex;
						justify-content: space-between;
						margin-top: 10px;
					}
				}
				.active{
					background-color: #F5F7FB;
				}
			}
		}
		.play{
			display: flex;
			flex:1;
			// width: 80%;
			// background-color: blue;
			.video{
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				background-color: #333333;
				.title{
					display: flex;
					justify-content: space-between;
					padding: 0 20px;
					color: white;
					background-color: #333333;
					height: 40px;
					align-items: center;
				}
				video{
					display: flex;
					flex:1;
					width: 100%;
					// width: 100%;
					// height: 100%;
				}
				.people{
					display: flex;
					align-items: center;
					height: 40px;
					color: white;
					padding: 0 10px;
				}
			}
			.nodata{
				display: flex;
				flex-direction: column;
				background-color: #E6F0F6;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				color: #929292;
			}
		}
	}
</style>
